<template>
	<view class="left clearfix bai">
		<!-- <view class="index-tools-title left">
			AI创作工具
		</view> -->
		<view class="tools-content-box left bai clearfix">
			<view class="tools-item left clearfix" v-for="(item,index) in tools" @click="navigateTo(item)">
				<view class="tools-item-text left">
					<text>{{item.title}}</text>
					<text>{{item.dec}}</text>
				</view>
				<view class="tools-icon right">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<login :show="showLogin" @close="showLogin=false"></login>
	</view>
</template>

<style scoped>
	.tools-item:hover{background: linear-gradient(90deg,#4287fe,#298bfe 25%,#0f8ffd 51%,#25b4c1);color:#fff;transition: all .3s;}
	.tools-icon image{width:100%;height:100%;}
	.tools-icon{width:100px;height:100px;margin-top:5px;margin-right:10px;}
	.tools-item-text text:last-child{font-size:14px;}
	.tools-item-text text:first-child{font-weight: 600;font-size:20px;}
	.tools-item-text text{float:left;width:100%;line-height:35px;text-align: center;}
	.tools-item-text{width:60%;height:70px;margin-top:20px;margin-left:10px;}
	.tools-item{cursor:pointer;height:110px;width:23%;border-radius: 10px;background:#fff;margin-left:1.3%;margin-right:.5%;margin-top:13px;}
	.tools-content-box{min-height:135px;background:#e6f0ff;border-radius: 10px;margin-top:100px;padding-bottom:15px;margin-bottom:30px;}
	.index-tools-title{color: #151b26;font-size: 20px;font-weight: 600;line-height: 32px;}
</style>

<script>
	export default {
		name:"create-tools",
		data() {
			return {
				showLogin:false,
				tools:[
					{
						title:'一键成片',
						dec:'一键创作精彩短视频。',
						page:'/pages/video/yijianchengpian/yijianchengpian',
						image:'/static/images/create/yijianchengpian.png'
					},
					{
						title:'图生视频',
						dec:'让图片动起来。',
						page:'/pages/video/tushengshipin/tushengshipin',
						image:'/static/images/create/tushengshipin.png'
					},
					{
						title:'文生视频',
						dec:'根据描述生成视频。',
						page:'/pages/video/tushengshipin/tushengshipin',
						image:'/static/images/create/tushengshipin.png'
					},
					{
						title:'动作模仿',
						dec:'让您的照片跳起来。',
						page:'/pages/video/tushengshipin/tushengshipin',
						image:'/static/images/create/tushengshipin.png'
					},
					{
						title:'图生演唱视频',
						dec:'让您的照片唱起来。',
						page:'/pages/video/tushengshipin/tushengshipin',
						image:'/static/images/create/tushengshipin.png'
					},
					{
						title:'口播视频',
						dec:'将视频和声音变成口播视频',
						page:'/pages/oral/add',
						image:'/static/images/create/kouboshipin.png'
					},
					{
						title:'音频创作',
						dec:'制作音频作品。',
						page:'/pages/audio/index',
						image:'/static/images/create/yinpinchuangzuo.png'
					},
					{
						title:'文案配音',
						dec:'将您的文字转化为语音。',
						page:'/pages/audio/index',
						image:'/static/images/create/yinpinchuangzuo.png'
					},
					{
						title:'AI作图',
						dec:'轻松实现创意图片',
						page:'/pages/audio/index',
						image:'/static/images/create/yinpinchuangzuo.png'
					},
					{
						title:'音乐生成',
						dec:'根据描述制作音乐作品。',
						page:'/pages/audio/index',
						image:'/static/images/create/yinpinchuangzuo.png'
					},
					
					{
						title:'批量混剪',
						dec:'一分钟生成1000条视频',
						page:'/pages/videos/add',
						image:'/static/images/create/shipinpilianghunjian.png'
					}
				]
			};
		},
		methods:{
			navigateTo(item){
				//先验证是否登录，未登录先登录
				var that = this;
				uni.getStorage({
					key:'login-userinfo',
					success:function(res){
						var userinfo = res.data;
						if(!userinfo || !userinfo._id){
							that.showLogin = true;
						}else{
							uni.navigateTo({
								url: item.page
							});
						}
					},
					fail() {
						that.showLogin = true;
					}
				});
				
			}
		}
	}
</script>
